<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>系统管理</title>
    {include file="common/_require"}

    <script>
        var currentHeaderNavItem = 'System';
        var currentLeftNavItem = 'agreement';
    </script>
    <style>
        .layui-form-pane .layui-form-label {
            width: 160px
        }

        .layui-form-pane .layui-input-block {
            margin-left: 160px;
        }
    </style>
</head>

<body class="layui-layout-body">

    <div class="layui-layout layui-layout-admin">
        {include file="common/_header"}

        {include file="common/left_system"}

        <div class="layui-body">

            <div style="padding:15px">
                <div class="main-header">
                    <span class="layui-breadcrumb">
                        <a>首页</a>
                        <a><cite>用户协议管理</cite></a>
                    </span>
                </div>
                <div class="main-container">
                    <div class="layui-row">

                        <div class="layui-col-md12">

                            <div id="toolbar">
                                <!-- Add font size dropdown -->
                                <select class="ql-size" lay-ignore>
                                    <option value="small">小号</option>
                                    <!-- Note a missing, thus falsy value, is used to reset to default -->
                                    <option selected>正常</option>
                                    <option value="large">大号</option>
                                    <option value="huge">特大号</option>
                                </select>
                                <!-- Add a bold button -->
                                <button class="ql-bold"></button>
                                <button class="ql-italic"></button>
                                <button class="ql-link"></button>
                                <button class="ql-underline"></button>
                                <button class="ql-strike"></button>
                                <button class="ql-blockquote"></button>
                                <button class="ql-code-block"></button>
                                <button class="ql-header" value="1" title="大标题"></button>
                                <button class="ql-header" value="2" title="小标题"></button>
                                <button class="ql-list" value="ordered" title="有序列表"></button>
                                <button class="ql-list" value="bullet" title="无序列表"></button>

                                <!-- Add subscript and superscript buttons -->
                                <button class="ql-script" value="sub"></button>
                                <button class="ql-script" value="super"></button>
                                <button class="ql-indent" value="-1"></button>
                                <button class="ql-indent" value="+1"></button>
                                <button class="ql-direction" value="rtl"></button>
                                <select class="ql-color" lay-ignore></select>
                                <select class="ql-background" lay-ignore></select>
                                <select class="ql-font" lay-ignore></select>
                                <button class="ql-align" value="center"></button>
                                <button class="ql-align" value=""></button>
                                <button class="ql-align" value="right"></button>
                                <button class="ql-align" value="justify"></button>
                                <button class="ql-image" title="选择图片"></button>


                            </div>
                            <div id="editor">

                            </div>
                            <div class="content" style="display: none;">
                                {:json_encode(unserialize(get_system_config('user_agreement')))}
                            </div>
                            <div>
                                <div class="layui-btn layui-btn-fluid save-article">保存</div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>


        {include file="common/_footer"}
    </div>
    <link rel="stylesheet" href="/static/lib/quill/quill.snow.css">
    <script src="/static/lib/quill/quill.min.js"></script>
    <script>
        layui.use(['layer', 'upload'], function () {
            var upload = layui.upload;
            var layer = layui.layer;
            var currentRange = {
                index: 0,
                lenght: 0
            }
            var quill = new Quill('#editor', {
                theme: 'snow',
                modules: {
                    toolbar: '#toolbar',

                },

            });

            quill.setContents(JSON.parse($('.content').text()))

            quill.on('selection-change', function (range, oldRange, source) {
                if (range) {
                    if (range.length == 0) {
                        console.log('User cursor is on', range.index);
                    } else {
                        var text = quill.getText(range.index, range.length);
                        console.log('User has highlighted', text);
                    }
                    currentRange = range;
                    console.log(currentRange);

                } else {
                    console.log('Cursor not in the editor');
                }
            });

            quill.on('text-change', function (delta, oldDelta, source) {
                
                if (source == 'api') {
                    console.log("An API call triggered this change.");
                } else if (source == 'user') {
                    console.log("A user action triggered this change.");
                }
            });

            var uploadSiteLogo = upload.render({
                elem: '.ql-image',
                url: '{:url("File/save")}',
                data: {
                    type: 4,
                    dir: 'article'
                },
                accept: 'images',
                done: function (result) {
                    if (result.code == 0) {
                        layer.msg('上传成功');
                        quill.insertEmbed(++currentRange.index, 'image', result.data.src);
                    } else {
                        layer.msg(result.msg)
                    }
                }
            })
            var toolbar = quill.getModule('toolbar');
            toolbar.addHandler('image', function () {
                return false;
            });

            $('.save-article').click(function () {
                var content = quill.getContents()
                console.log(content);
                $.post("{:url('admin/System/update')}",{
                    user_agreement:content.ops
                },function(){
                    layer.msg('保存完成')
                })
            })
        })
    </script>
</body>

</html>